iT邦幫忙

2024 iThome 鐵人賽

DAY 1
6

https://ithelp.ithome.com.tw/upload/images/20240915/20152073qdif9cWTaF.png

前言

在人們的印象中,Grafana 的使用者大多是 DevOps 或後端工程師,最常見的應用場景是透過 Prometheus 建立監控圖表等用途,與前端領域幾乎沒有交集。然而,當我們跳脫這種刻板印象,深入思考 Grafana 本身時,會發現它其實包含了豐富的視覺化圖表及可操控的欄位設定,這些 UI 建置工作完全屬於前端工程師的專業範疇。

因此,本系列文章將聚焦於 Grafana Scenes,一個由 Grafana 提供的 React-based 前端框架。開發者可以利用它來打造具備 Grafana 風格與功能的應用程式,讓前端工程師不僅能參與圖表視覺化,還能開發專屬於團隊的 Grafana 功能平台,進一步拓展 Grafana 的應用範圍。

雖然 Grafana Cloud 不斷推出各種實用功能,但基於商業考量,官方未開源這些進階應用服務的程式碼,因此這些功能僅限於付費版本或免費版的有限體驗。然而,透過 Grafana Scenes,我們可以在 Grafana 的開源版本中實現大部分 Grafana Cloud 的進階介面。值得一提的是,許多 Grafana Cloud 上的 Plugin 和工具現在也已經逐步轉向 Grafana Scenes 開發或重構,這更強調了前端開發在 Grafana 生態中的重要性。

在此基礎上,系列文章的後半部將以 Grafana Faro 為例,展示如何使用 Grafana Scenes 克隆出一個前端可觀測性平台,並深入探討可觀測性對於前端開發的深遠影響與價值,讓前端開發不再局限於視覺呈現,而能真正掌握應用的效能與穩定性。

目錄

https://ithelp.ithome.com.tw/upload/images/20240915/20152073EWUWFG6M75.png

第一部分 - 前端工程師也需要懂 Grafana 了嗎?

本部分將以一個前端工程師的視角或是從未接觸過 Grafana 的讀者,介紹 Grafana 的基礎知識,包含 Grafana 的架構、Grafana 的資料模型、Grafana 的視覺化圖表工具等,讓讀者能夠初步了解 Grafana 的運作原理與前端工程師在 Grafana 中的角色。

第二部分 - Grafana 前端工程師的吃飯工具

第二部分將以 Grafana Scenes 框架為主軸,介紹前端工程師在 Grafana 中可以使用的工具與技術,包含整體架構、資料請求、變數、視覺化圖表以及進階功能等,讓讀者能夠了解如何使用 Scenes 框架來開發 Grafana 的應用程式。

第三部分 - 前端從監控疊加可觀測性

本部分將以前端工程師的視角,介紹前端領域中門檻較高但需求越來越多的監控和可觀測性觀念,包含 Real User Monitoring、Web Vitals、OpenTelemetry 以及 Grafana 所提供的前端可觀測性工具 - Faro,讓讀者能夠擁有對於前端監控和可觀測性的基礎知識。

第四部分 - 探索 Grafana Faro 的可觀測性

第四部分會非常深入的認識 Grafana Faro 這個 Web SDK 如何進行前端應用程式的可觀測性,包括初始化設置、進階設置、與 React 相容性,以及他所收集的資料。

第五部分 - 搭起一座 Grafana Cloud 的可觀測性平台

第五部分將以第二、三、四部分的概念,實作一個 Grafana Cloud 版本的可觀測性平台,使用 Grafana Scenes 打造一個功能及資料呈現更完善,且不需付費的前端可觀測性應用程式。

適合閱讀的對象

  • 前端工程師
  • 公司內部有使用 Grafana 的團隊,並且有客製化應用程式需求
  • 對 Grafana 有興趣的所有開發者
  • 於日常開發時,曾經遇過前端應用程式效能問題、錯誤問題卻無從下手的開發者
  • 想成為 Grafana 貢獻者且希望更簡易上手,卻不知道該從何開始的開發者

其他參考文章

本次組成的 Grafana 科研遠征小隊,是一支集結了對 Grafana 應用所需具備技能的研究團隊。
如果對 Grafana 大規模維運、團隊管理或進階應用有興趣的讀者,可以參考以下系列文:
後 Grafana 時代的自我修養

如果對 Kubernetes 與基礎工程有興趣的讀者,可以參考以下系列文:
都什麼年代了,還在學 Kubernetes

另外,上一屆鐵人賽 SideProject30 組優勝得解作品已出版為:
營養師不開菜單後的 Next.js 全端轉職攻略:從專案規劃、畫面設計、資安到 SEO,挑戰一人 Side Project (iThome 鐵人賽系列書)

若有興趣可參考選購!

筆者語錄
希望這系列文章能夠讓前端工程師了解 Grafana 的生態,並且能夠在未來的開發工作中,將 Grafana 的技術應用到實際的專案中,甚至成為 Grafana 的貢獻者。同時也打破前端與 Grafana 的刻板印象,讓前端工程師也能夠在 Grafana 的生態中發光發熱。


下一篇
靠 Grafana 吃飯的第二天 - 前端眼中的 Grafana
系列文
論前端工程師如何靠 Grafana 吃飯:從 Grafana App 到前端可觀測性30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言